<template>
	<div class="footer-page goods_info">
		<div class="content">
			<div class="base">
				<button class="hidden" @click="editPrice">.</button>
				<h5 class="blue-font">1、商品基础信息</h5>
				<div v-for="(item, index) in baseMeta" :key="index" class="flex info_item">
					<label>{{ item.label }}</label>
					<div class="flex-1">
						<template v-if="item.name === 'convey_type'">
							<p>寄出{{ item.convey_type1 }}-归还{{ item.convey_type2 }}</p>
						</template>
						<template v-else-if="item.name === 'service_province'">
							<p>{{ goodsInfo.province }}{{ goodsInfo.city === "" ? '' : ',' }}{{ goodsInfo.city }}</p>
						</template>
						<template v-else-if="item.name === 'imgurl'">
							<el-image style="width:120px;height:120px"
								:src="goodsInfo.imgurl ? $globalObj.imgBaseUrl + goodsInfo.imgurl : ''"
								:preview-src-list="[$globalObj.imgBaseUrl + goodsInfo.imgurl]">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline" />
								</div>
							</el-image>
						</template>
						<template v-else-if="item.name === 'carousel_images'">
							<el-image v-for="(img, indexName) in goodsInfo.carousel_images" :key="indexName"
								style="width:120px;height:120px;margin-right:10px"
								:src="img ? $globalObj.imgBaseUrl + img : ''"
								:preview-src-list="[$globalObj.imgBaseUrl + img]">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline" />
								</div>
							</el-image>
						</template>
						<template v-else-if="item.name === 'goods_content'">
							<p class="detail" v-html="goodsInfo.goods_content" />
						</template>
						<template v-else-if="item.name === 'attribute'">
							<p v-for="(attr, indexAttr) in goodsInfo.attribute" :key="indexAttr" class="attr_item">
								<span>{{ attr.field_title }}:</span>{{ attr.field_val }}
							</p>
						</template>
						<template v-else-if="item.name === 'pay_type'">
							<span>{{ goodsInfo.pay_type === "1" ? "智能合同" : "芝麻信用" }}</span>
						</template>
						<template v-else-if="item.name === 'pact_type'">
							<span v-for="(pect) in goodsInfo.pact_type" :key="pect" class="attr_item">
								<span>{{ pect === "1" ? "租完归还/续租/买断" : "租完即送" }}</span>
							</span>
						</template>
						<template v-else>
							<p>{{ goodsInfo[item.name] }}</p>
						</template>
					</div>
				</div>
			</div>
			<div class="meal">
				<h5 class="blue-font">2、商品价格与参数</h5>
				<div v-for="meal in goodsInfo.setmeal" :key="meal.id" class="meal_item">
					<div v-for="(item, indexSetmeal) in mealMeta" :key="indexSetmeal" class="flex info_item">
						<label>{{ item.label }}</label>
						<div class="flex-1">
							<template v-if="item.name === 'lease_set'">
								<!-- <p>{{meal.lease_set==1?"按天":meal.lease_set==2?"按月":"自定义租期"}}</p> -->
								<table v-if="meal.lease_set != 3" class="lease_table" cellspacing="0">
									<tr v-if="leaseList[0].length === 0">
										<!-- <th>租期</th> -->
										<th style="width:230px">租赁方式</th>
										<th v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
											{{ lease.lease_name }}
										</th>
									</tr>
									<tr v-else>
										<!-- <th>租期</th> -->
										<th style="width:230px">租赁方式</th>
										<th v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
											{{ lease.lease_name }}
										</th>
									</tr>
									<tr v-show="Object.keys(leaseList[0]).length === 0 ? false : true">
										<td>租完归还/续租/买断</td>
										<td v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
											{{ lease.lease_price_2 }}
										</td>
									</tr>
									<tr v-show="Object.keys(leaseList[0]).length === 0 ? false : true">
										<td>市场价</td>
										<td v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
											{{ lease.buyout_amount }}
										</td>
									</tr>
									<tr v-show="Object.keys(leaseList[0]).length === 0 ? false : true">
										<td>买断价</td>
										<td v-for="lease in leaseList[0]" v-show="meal.id === lease.id" :key="lease.id">
											{{ parseFloat(lease.buyout_amount - (lease.lease_price_2 * lease.lease_name.replace(/[^\d]/g, ''))).toFixed(2)>1? parseFloat(lease.buyout_amount - (lease.lease_price_2 * lease.lease_name.replace(/[^\d]/g, ''))).toFixed(2):0 }}
										</td>
									</tr>
									<tr v-show="Object.keys(leaseList[1]).length === 0 ? false : true">
										<td>租完即送</td>
										<td v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
											{{ lease.lease_price_2 }}
										</td>
									</tr>
									<tr v-show="Object.keys(leaseList[1]).length === 0 ? false : true">
										<td>市场价</td>
										<td v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
											{{ lease.buyout_amount }}
										</td>
									</tr>
									<tr v-show="Object.keys(leaseList[1]).length === 0 ? false : true">
										<td>买断价</td>
										<td v-for="lease in leaseList[1]" v-show="meal.id === lease.id" :key="lease.id">
											{{ parseFloat(0).toFixed(2) }}
										</td>
									</tr>
								</table>
								<el-table v-else class="set_table" :data="meal.spec" border>
									<el-table-column align="center" label="期数" width="100px">
										<template slot-scope="scope">
											<span>第{{ scope.row.which_period }}期</span>
										</template>
									</el-table-column>
									<el-table-column align="center" label="租赁天数" prop="lease_days" />
									<el-table-column align="center" label="租期间隔">
										<template slot-scope="scope">
											<span>{{ scope.row.withhold_cycle }}天</span>
										</template>
									</el-table-column>
									<el-table-column align="center" label="每期租金" width="200" prop="lease_price" />
								</el-table>
							</template>
							<template v-else-if="item.name === 'huabei_data'">
								<el-table v-if="meal.huabei_data" class="set_table" :data="meal.huabei_data" border>
									<el-table-column align="center" label="租期设置" width="100px">
										<template slot-scope="scope">
											<span>{{ scope.row.lease_term ? (scope.row.lease_term + (meal.lease_set == 1 ? '个月' : '天')) : ''
                      }}</span>
										</template>
									</el-table-column>
									<el-table-column align="center" label="花呗总金额" prop="rent_total" />
									<el-table-column label="花呗3期承担-承担金额" align="center">
										<template slot-scope="scope">
											{{ scope.row.three_bear }}
											{{ scope.row.three_fee ? '￥' + scope.row.three_fee : '' }}
										</template>
									</el-table-column>
									<el-table-column label="花呗6期承担-承担金额" align="center">
										<template slot-scope="scope">
											{{ scope.row.six_bear }}
											{{ scope.row.six_fee ? '￥' + scope.row.six_fee : '' }}
										</template>
									</el-table-column>
									<el-table-column label="花呗12期承担-承担金额" align="center">
										<template slot-scope="scope">
											{{ scope.row.twelve_bear }}
											{{ scope.row.twelve_fee ? '￥' + scope.row.twelve_fee : '' }}
										</template>
									</el-table-column>
								</el-table>
							</template>
							<template v-else-if="item.name === 'meal_img'">
								<el-image style="width:120px;height:120px;margin-right:10px"
									:src="$globalObj.imgBaseUrl + meal.meal_img"
									:preview-src-list="[$globalObj.imgBaseUrl + img]">
									<div slot="error" class="image-slot">
										<i class="el-icon-picture-outline" />
									</div>
								</el-image>
							</template>
							<template v-else-if="item.name === 'buyout_amount'">
								<p>{{ meal.spec[0].buyout_amount }}</p>
							</template>
							<template v-else>
								<p>{{ meal[item.name] }}</p>
							</template>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="page-footer-btns">
			<el-button size="small" type="primary" @click="$router.back()">关闭</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getGoodsInfo
	} from '@/api/goods'
	export default {
		// props: ['goodsId'],
		props: {
			goodsId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				edit: true, //编辑市场价
				goodsInfo: {},
				baseMeta: [{
						label: '商品品类',
						name: 'cate_name'
					},
					{
						label: '商品名称',
						name: 'title'
					},
					{
						label: '商品推广名称',
						name: 'extension_title'
					},
					{
						label: '推广关键字',
						name: 'spread_title'
					},
					{
						label: '商品属性',
						name: 'attribute'
					},
					{
						label: '新旧',
						name: 'new_grade'
					},
					{
						label: '租赁标签',
						name: 'rent_label'
					},
					{
						label: '起租日期',
						name: 'start_date'
					},
					{
						label: '商品销量',
						name: 'refuse'
					},
					{
						label: '商品封面',
						name: 'imgurl'
					},
					{
						label: '商品图片',
						name: 'carousel_images'
					},
					{
						label: '商品详情',
						name: 'goods_content'
					},
					{
						label: '租赁方式',
						name: 'pact_type'
					},
					{
						label: '产品合同类型',
						name: 'pay_type'
					},
					{
						label: '服务城市',
						name: 'service_province'
					},
					{
						label: '租赁地址',
						name: 'service_address'
					},
					{
						label: '运费',
						name: 'transfer_cost'
					},
					{
						label: '配送方式',
						name: 'convey_type'
					}
				],
				mealMeta: [{
						label: '套餐名字',
						name: 'title'
					},
					{
						label: '商品图片',
						name: 'meal_img'
					},
					{
						label: '销售价',
						name: 'buyout_amount'
					},
					{
						label: '官网价',
						name: 'price'
					},
					{
						label: '库存',
						name: 'quantity'
					},
					{
						label: '租期设置',
						name: 'lease_set'
					}

				],
				leaseList: []
			}
		},
		mounted() {
			document.getElementsByClassName('app-main')[0].scrollTop = 0
			this.getData()
		},
		methods: {
			editPrice() {

				this.edit = this.edit == true ? false : true;


			},
			getData() {
				getGoodsInfo(this.goodsId).then(res => {
					// console.log('goodInfo=>', res);
					this.goodsInfo = res || {}
					this.goodsInfo.carousel_images = this.goodsInfo.carousel_images.split(',')
					const arr1 = [] // 存放固定租期
					const arr2 = [] // 存放租完即送
					for (let i = 0; i < res.setmeal.length; i++) {
						for (let j = 0; j < res.setmeal[i].spec.length; j++) {
							if (res.setmeal[i].spec[j].pact_type === 1) {
								arr1.push({
									id: res.setmeal[i].spec[j].setmeal_id,
									lease_name: res.setmeal[i].spec[j].lease_time,
									lease_price: res.setmeal[i].spec[j].lease_price,
									lease_price_2: res.setmeal[i].spec[j].day_price,
									buyout_amount: res.setmeal[i].spec[j].buyout_amount,
									spec: res.title + ' ' + res.setmeal[i].spec[j].spec + ' ' + res
										.setmeal[i].spec[j].color
								})
							} else if (res.setmeal[i].spec[j].pact_type === 2) {
								arr2.push({
									id: res.setmeal[i].spec[j].setmeal_id,
									lease_name: res.setmeal[i].spec[j].lease_time,
									lease_price: res.setmeal[i].spec[j].lease_price,
									lease_price_2: res.setmeal[i].spec[j].day_price,
									buyout_amount: res.setmeal[i].spec[j].buyout_amount,
									spec: res.title + ' ' + res.setmeal[i].spec[j].spec + ' ' + res
										.setmeal[i].spec[j].color
								})
							}
						}
					}
					this.leaseList[0] = arr1
					this.leaseList[1] = arr2
					// this.leaseList[0]=  arr1.filter((element,index,self)=>{
					//   return self.findIndex(x=>x.lease_name===element.lease_name) === index
					// })
					// this.leaseList[1]=  arr2.filter((element,index,self)=>{
					//   return self.findIndex(x=>x.lease_name===element.lease_name) === index
					// })
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		border: 1px solid #e6e6e6;
	}

	.base,
	.meal {
		padding: 30px;
	}

	.meal {
		border-top: 1px solid #e6e6e6;
	}

	.meal_item {
		padding: 20px 0 30px;
	}

	.meal_item+.meal_item {
		border-top: 1px solid #e6e6e6;
	}

	.detail {
		width: 500px;
		max-height: 500px;
		overflow: auto;
		min-height: 20px;
		padding-right: 20px;

		/deep/img {
			width: 100% !important;
		}
	}

	.info_item {
		margin-top: 20px;

		label {
			width: 120px;
			color: #666666;
			text-align: right;
			margin-right: 20px;
		}
	}

	.attr_item {
		span {
			margin-right: 10px;
		}

		&+.attr_item {
			margin-top: 10px;
		}
	}

	.lease_table {
		tr {
			height: 40px;
			line-height: 40px;

			&:first-child {
				background: #f5f5f5;
			}

			th,
			td {
				border: 1px solid #e6e6e6;
				width: 100px;
				text-align: center;

				&:not(:first-child) {
					border-left: none;
				}
			}

			th {
				font-weight: normal;
				border-bottom: none;
			}
		}
	}

	.set_table {
		max-width: 1000px;
	}

	.hidden {
		background-color: #fff;
		border: none;
		float: right;
		color: #fff;
		height: 50px;
		width: 50px;
	}
</style>
